<template>
  <div>
    <!-- <h1>Hello World</h1> -->
    <div id="other-canvas"></div>
  </div>
</template>

<script setup>
import * as THREE from "three";
import { ref, reactive, onMounted, onUnmounted } from "vue";
import Stats from "three/examples/jsm/libs/stats.module.js";
// import { GUI } from "three/examples/jsm/libs/dat.gui.module.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment";


onMounted(() => {
  let mixer;

  const clock = new THREE.Clock();
  const container = document.getElementById("other-canvas");

  const stats = new Stats();
  container.appendChild(stats.dom);

  const renderer = new THREE.WebGLRenderer({ antialias: true });
  //   debugger
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);

  const pmremGenerator = new THREE.PMREMGenerator(renderer);

  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xbfe3dd);
  scene.environment = pmremGenerator.fromScene(
    new RoomEnvironment(renderer),
    0.04
  ).texture;

  const camera = new THREE.PerspectiveCamera(
    40,
    window.innerWidth / window.innerHeight,
    1,
    100
  );
  camera.position.set(5, 2, 8);

  const controls = new OrbitControls(camera, renderer.domElement);
  controls.target.set(0, 0.5, 0);
  controls.update();
  controls.enablePan = false;
  controls.enableDamping = true;

  const dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath("./draco/gltf/");

  const loader = new GLTFLoader();
  loader.setDRACOLoader(dracoLoader);
  loader.load(
    "model/LittlestTokyo.glb",
    function (gltf) {
      const model = gltf.scene;
      model.position.set(1, 1, 0);
      model.scale.set(0.01, 0.01, 0.01);
      scene.add(model);

      mixer = new THREE.AnimationMixer(model);
      mixer.clipAction(gltf.animations[0]).play();

      animate();
    },
    undefined,
    function (e) {
      console.error(e);
    }
  );

  const addLight = () => {
    const lightPos = [
      // [0, 0, 10],
      [0, 0, -10],
      // [0, 10, 0],
      [0, -10, 0],
      // [-10, 0, 0],
      [10, 0, 0],
      // [5, 10, 0, 0.3],
      // [-5, 10, 0, 0.3],
      // [0, 10, 5, 0.3],
      // [0, 10, -5, 0.3],
    ];
    for (let [x, y, z, intensity] of lightPos) {
      intensity == undefined ? 1 : intensity;
      const light = new THREE.DirectionalLight(0xffffff, intensity);
      light.position.set(x, y, z);
      scene.add(light);
    }
  };
  addLight();

  window.onresize = function () {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
  };

  function animate() {
    requestAnimationFrame(animate);

    const delta = clock.getDelta();

    mixer.update(delta);

    controls.update();

    stats.update();

    renderer.render(scene, camera);
  }
});
</script>

<style lang="scss" scoped></style>
